<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="70px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="选择日期"> 
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.startDate" :clearable='false' :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">-</el-col>
                                <el-col :span="11">
                                    <el-date-picker v-model="query.endDate" :clearable='false' :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="endDateChange" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>              
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="类别">
                            <el-select v-model="query.categoryId" placeholder="请选择" style="width:100%;" @change='changeCategory'>
                                <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="积分类型">
                            <el-select v-model="query.integralType" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in integralTypeList" :key="item.integralTypeId" :label="item.integralTypeName" :value="item.integralTypeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportTable()">导出</el-button>
                    <el-button @click="opInteManage()">运营积分管理</el-button>
                </div>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="日期" align="center">
                    <template scope="scope">
                        <span>{{scope.row.date | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="类别" align="center">
                    <template scope="scope">
                        <span>{{scope.row.type | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="积分类型" align="center">
                    <template scope="scope">
                        <span>{{scope.row.pointType | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付方式" align="center">
                    <template scope="scope">
                        <span>{{scope.row.payType | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="积分流入（个积分）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.pointInput | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="积分流出（个积分）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.pointOutput | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class='note'>
                <p><font color='red'>* </font> 积分统计是以积分池的视角行为判断积分流入、流出的。</p>
                <p><font color='red'>* </font> 每日系统赠送积分总额上限为<font color='red'>30万</font>。</p>
                <p class='month-data' v-if="this.totalList">截止至 {{currentDate}} 日24点，用户拥有积分总额：{{totalList.point==''?'0':totalList.point}}；用户拥有礼物总计：{{totalList.giftPoint==''?'0':totalList.giftPoint}}（换算成积分）。</p>
            </div>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import startDate from 'components/Datepicker/startDate';   
    import endDate from 'components/Datepicker/endDate';
    import { queryPoint } from 'api/integralManage';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'integralTable',
        components: { Levelbar, TableLayout, startDate, endDate },
        data() {
            return { 
                loading: true,  
                totalList: '',
                currentDate: '',
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    startDate: new Date() - 3600 * 1000 * 24,
                    endDate: new Date() - 3600 * 1000 * 24,
                    categoryId: '',
                    integralType: ''
                },
                categoryList: [{
                    categoryId: '',
                    categoryName: '请选择'
                }, {
                    categoryId: '1',
                    categoryName: '系统赠送'
                }, {
                    categoryId: '2',
                    categoryName: '运营赠送'
                }, {
                    categoryId: '3',
                    categoryName: '积分充值'
                // }, {
                //     categoryId: '4',
                //     categoryName: '积分流通'
                // }, {
                //     categoryId: '5',
                //     categoryName: '礼物流通'
                }, {
                    categoryId: '6',
                    categoryName: '积分消耗'
                }],
                integralTypeList: [
                    // {
                    //     integralTypeId: '',
                    //     integralTypeName: '请选择'
                    // }, {
                    //     integralTypeId: '101',
                    //     integralTypeName: '签到'
                    // }, {
                    //     integralTypeId: '102',
                    //     integralTypeName: '连续签到'
                    // }, {
                    //     integralTypeId: '103',
                    //     integralTypeName: '发布作业'
                    // }, {
                    //     integralTypeId: '104',
                    //     integralTypeName: '发布动态'
                    // }, {
                    //     integralTypeId: '105',
                    //     integralTypeName: '发布通知'
                    // }, {
                    //     integralTypeId: '106',
                    //     integralTypeName: '点赞'
                    // }, {
                    //     integralTypeId: '201',
                    //     integralTypeName: '活动赠送'
                    // }, {
                    //     integralTypeId: '301',
                    //     integralTypeName: '积分购买'
                    // }, {
                    //     integralTypeId: '401',
                    //     integralTypeName: '发布你问我答'
                    // }, {
                    //     integralTypeId: '402',
                    //     integralTypeName: '解答你问我答'
                    // }, {
                    //     integralTypeId: '403',
                    //     integralTypeName: '兑换礼物'
                    // }, {
                    //     integralTypeId: '404',
                    //     integralTypeName: '礼物兑换'
                    // }, {
                    //     integralTypeId: '405',
                    //     integralTypeName: '赞赏'
                    // }, {
                    //     integralTypeId: '501',
                    //     integralTypeName: '收到礼物'
                    // }, {
                    //     integralTypeId: '502',
                    //     integralTypeName: '赠送礼物'
                    // }, {
                    //     integralTypeId: '601',
                    //     integralTypeName: '兑换实物'
                    // }, {
                    //     integralTypeId: '602',
                    //     integralTypeName: '兑换勋章'
                    // }
                ],
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24);
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24) || (time.getTime()) < (Date.now() - 3600 * 1000 * 24 * 2);
                    }
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {
               
                let type = this.query.categoryId; // 类目（1.系统赠送 2.运营赠送  3.积分充值 4.积分流通 5.礼物流通 6.积分消耗）
                let pointType = this.query.integralType; // 类型（101.签到 102.连续签到…）
                let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间    

                this.currentDate = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY/MM/DD');
                queryPoint(this.pageQuery.currentpage, this.config.pageSize, type, pointType, dataStart, dataEnd).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    this.totalList = '';
                    this.tableData = response.data.content.info.list;
                    this.pageQuery.total = response.data.content.info.pagination.total;
                    this.totalList = response.data.content.totalInfo; 
                }).catch(() => {
                    this.loading = false;
                })
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime() - 864e5);
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            },

            // 导出
            exportTable() {
                let type = this.query.categoryId; // 类目（1.系统赠送 2.运营赠送  3.积分充值 4.积分流通 5.礼物流通 6.积分消耗）
                let pointType = this.query.integralType; // 类型（101.签到 102.连续签到…）
                // let dataStart = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); // 查询开始时间
                // let dataEnd = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); // 查询结束时间  
                let dataStart = this.query.startDate?moment(this.query.startDate).format('YYYY-MM-DD')+' 00:00:00' : ''; // 查询开始时间
                let dataEnd = this.query.endDate?moment(this.query.endDate).format('YYYY-MM-DD')+' 23:59:59' : '';
                window.location.href = `${LOCAL_API.cm}/point/manage/outExcelByPoint?type=${type}&pointType=${pointType}&dataStart=${dataStart}&dataEnd=${dataEnd}`;
            },

            // 运营积分管理
            opInteManage() {
                this.$router.push({ path: 'opInteManage' });
            },
            
            // 类别改变
            changeCategory(value) {
                
                this.integralTypeList = [];
                
                if (!this.query.categoryId) {
                    this.query.integralType = '';
                // 系统赠送
                } else if (value == '1') {
                    
                    this.integralTypeList = [
                        {
                            integralTypeId: '101',
                            integralTypeName: '签到'
                        }, {
                            integralTypeId: '102',
                            integralTypeName: '连续签到'
                        }, {
                            integralTypeId: '103',
                            integralTypeName: '发布作业'
                        }, {
                            integralTypeId: '104',
                            integralTypeName: '发布动态'
                        }, {
                            integralTypeId: '106',
                            integralTypeName: '点赞'
                        }, {
                            integralTypeId: '108',
                            integralTypeName: '邀请家长'
                        }, {
                            integralTypeId: '109',
                            integralTypeName: '评论动态'
                        }, {
                            integralTypeId: '111',
                            integralTypeName: '提交作业人数达到25'
                        }, {
                            integralTypeId: '112',
                            integralTypeName: '上传资源'
                        }, {
                            integralTypeId: '113',
                            integralTypeName: '批改作业'
                        }
                    ];
                    this.query.integralType = '101';

                // 运营赠送
                } else if (value == '2') {
                    
                    this.integralTypeList = [
                        {
                            integralTypeId: '201',
                            integralTypeName: '活动赠送'
                        }
                    ];
                    this.query.integralType = '201';

                // 积分消耗
                } else if (value == '6') {
                    
                    this.integralTypeList = [
                        {
                            integralTypeId: '602',
                            integralTypeName: '兑换勋章'
                        }, {
                            integralTypeId: '601',
                            integralTypeName: '兑换实物'
                        }, {
                            integralTypeId: '704',
                            integralTypeName: '积分抵扣（超级会员+报平安+e直播）'
                        }, {
                            integralTypeId: '703',
                            integralTypeName: '积分抵扣（超级会员+e直播）'
                        }, {
                            integralTypeId: '702',
                            integralTypeName: '积分抵扣（超级会员+报平安）'
                        }, {
                            integralTypeId: '701',
                            integralTypeName: '积分抵扣（超级会员）'
                        }
                    ];
                    this.query.integralType = '602';

                // 积分充值
                } else if (value == '3') {
                    
                    this.integralTypeList = [
                        {
                            integralTypeId: '301',
                            integralTypeName: '积分购买'
                        }
                    ];
                    this.query.integralType = '301';
                }
            }
        }

    }
</script>

<style lang="scss" scoped>
    .main-content {
        .note {
            font-size: 14px;
            color: #333;
            padding-left: 20px;
            padding-top: 15px;
        }
        .month-data {
            font-size: 14px;
        }
    }
</style>

